<div class="control-group <#if nameMsg??>error</#if>">
  <label class="control-label" for="inputAccount">用户名</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-user"></i></span>
      <input type="text" minlength="5" maxlength="15" id="inputAccount" name="User.name" value="${(User.name)!}"
             placeholder="本校学生请使用学号注册" autofocus required>
    </div>
    <p class="text-error" id="name-error">${nameMsg!}</p>
  </div>
</div>
<div class="control-group <#if emailMsg??>error</#if>">
  <label class="control-label" for="inputEmai">电子邮件</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input type="email" id="inputEmail" name="User.email" value="${(User.email)!}" placeholder="Email" required>
    </div>
    <p class="text-error" id="email-error">${emailMsg!}</p>
  </div>
</div>
<div class="control-group <#if passwordMsg??>error</#if>">
  <label class="control-label" for="inputPassword">密码</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-lock"></i></span>
      <input type="password" minlength="6" maxlength="20" id="inputPassword" name="User.password" placeholder="Password"
             required>
    </div>
    <p class="text-error">${passwordMsg!}</p>
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="inputConfirmPass">确认密码</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-lock icon-white"></i></span>
      <input type="password" minlength="6" maxlength="20" id="inputConfirmPass" name="repass"
             placeholder="Confirm your Password" required>
    </div>
    <p class="text-error">${confirmMsg!}</p>
  </div>
</div>
<div class="control-group <#if captchaMsg??>error</#if>">
  <label class="control-label" for="inputCaptcha">验证码</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-check"></i></span>
      <input type="text" minlength="4" maxlength="4" id="inputCaptcha" class="input-small" name="captcha" required>
    </div>
    <span id="captcha">
      <a id="captcha" onclick="getCaptcha();" href="javascript:;" title="click to change another one">
        <img id="captcha" src="captcha"/>
      </a>
    </span>
    <p class="text-error">${captchaMsg!}</p>
  </div>
</div>

<script src='assets/jquery-validation/dist/jquery.validate.min.js' type='text/javascript'></script>
<script type="text/javascript">
  $().ready(function () {
    $("#signupForm").validate();

    $('#inputAccount').focusout(function () {
      var name = $('#inputAccount').val();
      if (name) {
        $.get('/api/user/isUserNameExist', { 'name': name }, function (data) {
          if (data.result) {
            $('#name-error').text('This user name already registered!');
            $('#name-error').parent().parent().addClass('error');
          } else {
            $('#name-error').text('');
            $('#name-error').parent().parent().removeClass('error');
          }
        });
      }
    });

    $('#inputEmail').focusout(function () {
      var email = $('#inputEmail').val();
      if (email) {
        $.get('/api/user/isEmailExist', { 'email': email }, function (data) {
          if (data.result) {
            $('#email-error').text('This Email already registered!');
            $('#email-error').parent().parent().addClass('error');
          } else {
            $('#email-error').text('');
            $('#email-error').parent().parent().removeClass('error');
          }
        });
      }
    });
  });
</script>
